<template name="scoreStars">
	<view class="movie-score-wapper">
		<image v-for="item in yellow" src="../static/icon/star-yellow.png" mode=""></image>
		<image v-for="item in grey" src="../static/icon/star-gray.png" mode=""></image>
		<view class="movie-score" v-if="isScore == 'true'">
			{{innerScore}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			innerScore: {
				type: Number,
				default: 0
			},
			isScore:{
				type:String,
				default:'true'
			},
			
		},
		data() {
			return {
				yellow: 0,
				grey: 5,
			};
		},
		created() {
			this.yellow = parseInt(this.innerScore / 2);
			this.grey = 5 - this.yellow;
		},
	}
</script>

<style>
.movie-score-wapper{
	display: flex;
	flex-direction: row;
	margin-top: 6upx;
	align-items: center;
}
.movie-score-wapper image{
	width: 20upx;
	height: 20upx;
}
.movie-score{
	font-size: 12px;
	color: grey;
	margin-left: 8upx;
}

</style>
